<template>
	<div class="mail_message_container">
		<el-tabs v-model="activeName" type="card">
			<el-tab-pane label="提醒列表" name="remind"></el-tab-pane>
			<el-tab-pane label="忽略列表" name="ignore"></el-tab-pane>
		</el-tabs>
		<template v-if="activeName === 'remind'">
			<remind-list :data="tableData" @refresh="queryTableData">
				<template v-if="dataCount > 0">
					<sw-pagination :total="dataCount" :page.sync="queryData.page" :limit.sync="queryData.limit" @change="queryTableData"></sw-pagination>
				</template>
			</remind-list>
		</template>
		<template v-if="activeName === 'ignore'">
			<ignore-list :data="tableData" @refresh="queryTableData">
				<template v-if="dataCount > 0">
					<sw-pagination :total="dataCount" :page.sync="queryData.page" :limit.sync="queryData.limit" @change="queryTableData"></sw-pagination>
				</template>
			</ignore-list>
		</template>
	</div>
</template>

<script>
import remindList from './remind';
import ignoreList from './ignore';
import { queryMailPageList } from '@/api/business/tbTopic';
import { queryMarvelPageList } from '@/api/business/tbMailIgnore';
export default {
	components: { remindList, ignoreList },
	data() {
		return {
			loading: false,
			dataCount: 0,
			queryData: { page: 1, limit: 15 },
			tableData: [],
			activeName: 'remind'
		};
	},
	computed: {
		callfunction() {
			switch (this.activeName) {
				case 'remind':
					return queryMailPageList;
					break;
				case 'ignore':
					return queryMarvelPageList;
					break;
			}
		}
	},
	watch: {
		activeName: {
			handler(val) {
				this.tableData = [];
				this.queryData.page = 1;
				this.queryTableData();
			},
			immediate: true
		}
	},
	methods: {
		//获取邮件列表
		async getTableData() {
			let params = { ...this.queryData };
			let result = await this.callfunction(params).then((res) => res.data);
			this.loading = false;
			if (result.code === '0') {
				this.dataCount = parseInt(result.count);
				this.tableData = result.data || [];
			}
		},

		//查询数据
		queryTableData() {
			this.loading = true;
			this.getTableData();
		}
	}
};
</script>

<style lang="scss" scoped>
.mail_message_container::v-deep {
	display: flex;
	flex-direction: column;
	height: 100%;
	.el-tabs {
		flex-shrink: 0;
	}
	.el-tabs__header {
		margin-bottom: 0;
	}
	.el-tabs__item {
		font-size: 16px;
		&.is-active {
			background-color: #fff;
		}
	}
	.sw_system_container {
		flex: 1;
		overflow: hidden;
		border: solid 1px #e4e7ed;
		border-top: none;
	}
}
</style>
